<!----------------
***PHPBOT
***Author:wangwei
***Email:915335526@qq.com
***Versions:1.0
----------------->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>JSON内容管理系统</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <script type="text/javascript" charset="utf-8" src="ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="ueditor.all.min.js"> </script>
	<script type="text/javascript" charset="utf-8" src="lang/zh-cn/zh-cn.js"></script>

    <style type="text/css">
    	body{
    		background: #82a7a7;
    	}
		.contentdata input{
			outline: none;
			padding: 7px;
			width: 90%;
			margin: .5% 0;
		}
		.biaoti{
			width: 98%;
			background: #2f4f4f;
			color: #fff;
			line-height: 28px;
			padding-left: 2%;
			font-weight: 700;
			margin-bottom: 2%;
		}
		.config input{
			outline: none;
			padding: 5px;
			margin: 1% 0;
			width: 96%;
		}
		button{
			width: 100%;
			margin: 1% 0;
			padding: 7px;
			cursor: pointer;
    		font-weight: 700;
    		letter-spacing: 1px;
    		font-size: 14px;
			background: repeating-linear-gradient(180deg, #82a7a7, #2f4f4f 60px);
			color: #fff;
		}
		button:hover{
			background: #c1b396;
    		color: #564219;
		}
		select{
			outline: none;
			padding: 7px;
			cursor: pointer;
		}

		.build{
			width: 35%;			
		}
		body .kuan:nth-child(2){
			width:53%;
		}
        .kuan{
			width:22%;
			padding: 0.3%;
			margin: 0.2%;
			float: left;
			background: #fff;
        }
		.message{
			height: 800px;
			overflow-x: auto;
		}
		.config-list{
			
		}
		.config-list span{
			display: inline-block;
			width: 30%;
			text-align: left;
			color: #564219;
		    font-weight: 700;
		    font-size: 14px;
		}
		.tupian{
			width: 190px;
			height: 190px;
			margin: 0 0 10px 50px;
			background: url(dialogs/attachment/images/image.png) center no-repeat;
		}
		.contentdata{
			
		}
		.contentdata img{
			position: absolute;
			max-width: 50%;
			max-height: 190px;
		}
		.contentdata .file{
			position: absolute;
			z-index: 3;
			opacity: 0;
			width: 180px;
			height: 180px;
			cursor: pointer;
			margin: 0;
		}
		.contentdata span{
			display: inline-block;
			width: 50px;
			text-align: right;
			color: #564219;
    		font-weight: 700;
		}
		.list{
			min-height: 500px;
			overflow-x: auto;			
		}
		.content-list{
			line-height: 24px;
			cursor: pointer;
		    display: flex;
		    justify-content: space-between;
			border-bottom: #fff solid 1px;
		}
		.content-list span:nth-child(1){
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
			width: 70%;
			font-size: 14px;
		}
		.content-list span:nth-child(2){
			font-size: 12px;
		}
		.content-list:hover{
			color: #82a7a7;
			border-bottom: #82a7a7 solid 1px;
		}

		.shuju{
			font-weight: 700;
    		color: #564219;
			display: flex;
		    align-content: center;
		    justify-content: space-between;
		    align-items: center;
    		padding-bottom: 2%;
		    margin-bottom: 4%;
		    border-bottom: solid 1px darkslategray;
		}
		.caozuo{
			display: flex;
			justify-content: space-between;
		}
		.caozuo button{
			width: 30%;
		}
		
    </style>
</head>
<body>
<div class="kuan">
	<div class="biaoti">状态</div>
	<div class="shuju">
		<div><span>模板类型：</span><select id="tempmenu"></select></div>
		<button class="build" onclick="build()">一键生成静态</button>
	</div>
	<div class="message" id="message"></div>
</div>

<div class="kuan">
	<div class="biaoti">内容详情</div>
	<div id="contentdata" class="contentdata">
		<span>编号：</span><input class="inputname" onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" type="text" id="id" name="id" value=""><br>
		<span>时间：</span><input class="inputname" type="date" id="time" name="time" value=""><br>
		<span>图片：</span>
			<div class="tupian">
				<img id="showimg">
				<input class="file" id="file" onchange="filefun(this)" type="file" name="upfile">
				<input class="inputname" type="hidden" id="img" name="img" value=""><br>
			</div>
		<span>标题：</span><input class="inputname" id="tit" name="tit" value=""><br>
		<span>描述：</span><input class="inputname" id="dec" name="dec" value=""><br>
	</div>
    <script id="editor" type="text/plain" style="height:340px;width: 99%;"></script>
</div>
<div class="kuan">
	<div class="biaoti">系统配置</div>
	<div class="config" id="config"></div>
	<button onclick="configclick()">保存配置</button>
</div>
<div class="kuan">
	<div class="biaoti">操作</div>
	<div class="shuju">数据类型：<select id="jsonmenu" onchange="jsonclick()"></select></div>
	<div class="caozuo">
		<button onclick="contentclick('update')">更新内容</button>
		<button onclick="contentclick('add')">新增内容</button>
		<button onclick="contentclick('delete')">删除该条</button>
	</div>
</div>
<div class="kuan">
	<div class="list" id="list"></div>
</div>


<script type="text/javascript">
	function post(url,str,fun) {
		new Promise((resolve, reject) => {
	        var getRequest = new XMLHttpRequest();//创建请求对象
	        getRequest.open("POST", url, true);//链接服务器
			if(typeof(str)!='string'){
				var ConType = "multipart/form-data;"
				var postStr = new FormData(); // FormData 对象
				
				postStr.append("upfile", str); // 文件对象
			}
			else{
				var ConType = "application/x-www-form-urlencoded;"
				getRequest.setRequestHeader("contentType", "text/html;charset=uft-8");//设置编码格式
				getRequest.setRequestHeader("Content-Type", ConType);//表单类型
				var postStr = str;
			}

	        getRequest.send(postStr);//发送请求
	        getRequest.onreadystatechange = ()=> {
	            if (getRequest.readyState === 4) {//请求已完成，且响应已就绪
	                if (getRequest.status === 200) {//请求成功
	                    var resultStr = getRequest.responseText//获取结果
						resolve(resultStr)
	                }
	                else {
						reject(getRequest.status)
	                }
	            }
	        }
		}).then(fun)
	}
	
	function jsonpost(){
		post('api.php','type=menu',(res)=>{
			let jsonstr = '<option value="">请选择json数据</option>'
			JSON.parse(res)['jsonmenu'].forEach((val)=>{
				jsonstr += '<option value="'+val+'">'+val+'</option>'
			})
			document.getElementById('jsonmenu').innerHTML = jsonstr
			
			let tempstr = ''
			JSON.parse(res)['tempmenu'].forEach((val)=>{
				tempstr += '<option value="'+val+'">'+val+'</option>'
			})
			document.getElementById('tempmenu').innerHTML = tempstr
		})
	}
	jsonpost();
	
	function jsonclick(){
		var jsonvalue = document.getElementById('jsonmenu').value
		if(jsonvalue){
			post('api.php','type=select&jsonvalue='+jsonvalue,(res)=>{
				if(res=='null'){ return false; }
				
				if(JSON.parse(res).length==undefined){
					let str = '',conobj = JSON.parse(res)
					
					for(let key in conobj){
						str += '<div class="config-list"><span>'+key+'：</span><input value="'+conobj[key]+'" name="'+key+'"></div>'
					}
					document.getElementById('config').innerHTML = str
				}
				else{
					let str = ''
					JSON.parse(res).forEach((val)=>{
						str += '<div class="content-list" onclick="listclick(\''+escape(JSON.stringify(val))+'\')"><span><b>'+val.id+'、</b>'+val.tit+'</span><span>'+val.time+'</span></div>'
					})
					document.getElementById('config').innerHTML = ''
					document.getElementById('list').innerHTML = str
				}
				
			})
		}
	}
	
	function build(){
		var tempval = document.getElementById('tempmenu').value
		var tempname = tempval?tempval:'default'
		post('build.php','tempname='+tempname,(res)=>{
			updatehtml(res);
		})
	}
	
	function filefun(e){
		post('file.php',e.files[0],(res)=>{
			res = JSON.parse(res)
			if(res.state=='SUCCESS'){
				document.getElementById("showimg").src = res.url;
				document.getElementById("img").value = res.url;
			}
		})

	}
	
	function configclick(){
		var jsonvalue = document.getElementById('jsonmenu').value
		
		if(jsonvalue!='config.json'){
			alert('需选中配置json文件');
			return false;
		}
		
		let inparr = document.getElementById('config').getElementsByTagName("input")
		let str = ''
		for(let key in inparr){
			if(typeof(inparr[key])=='object'){
				str += inparr[key].name+'='+inparr[key].value.replace(/\&/g,"%26")+'&'
			}
		}
		post('api.php',str+'type=config',(res)=>{
			updatehtml(res);
		})
	}
	
	function listclick(val){
		var str = JSON.parse(unescape(val))
		for(let key in str){
			let dom = document.getElementById(key)
			if(dom){
				if(key=='img'){
					document.getElementById("showimg").src = str[key];
					document.getElementById("img").value = str[key];
				}
				dom.value = str[key]
			}
		}
		//富文本插入内容操作
		UE.getEditor('editor').setContent(str.con?str.con:'',false);
		
		
	}
	
	function contentclick(system){
		let inparr = document.getElementById('contentdata').getElementsByClassName("inputname")

		var jsonvalue = document.getElementById('jsonmenu').value
		
		let str = ''
		for(let key in inparr){
			if(typeof(inparr[key])=='object'){
				if(inparr[key].name=='id'){
					str+='url=/'+jsonvalue.split('.')[0]+'/'+inparr[key].value+'.html&'
				}
				str += inparr[key].name+'='+inparr[key].value.replace(/\&/g,"%26")+'&'
			}
		}
		
		
		if(!document.getElementById("id").value){
			alert('需先选中数据内容');
			return false
		}
		let con = UE.getEditor('editor').getContent();
		
		post('api.php',str+'type='+jsonvalue+'&system='+system+'&con='+con.replace(/\&/g,"%26"),(res)=>{
			jsonclick();
			updatehtml(res);
		})
		
	}
	
	function updatehtml(res){
		var  mes = document.getElementById('message');
		var  span = document.createElement('span');
			 span.innerHTML=res;
		mes.insertBefore(span,mes.children[0]);
	}
	

    //实例化编辑器
    var ue = UE.getEditor('editor');

</script>
</body>
</html>